/**
 * @Author: jipeng.Li
 * @Date: 2021-04-20 08:22:21
 * @LastEditors: jipeng.Li
 * @LastEditTime: 2021-04-20 11:54:21
 * @Description: 共享记录
 */

import React from 'react';
import { Text, TouchableOpacity, View, StyleSheet } from 'react-native';
import {
  fontColorBlack,
  fontColorCoffee,
  mainBgColorLightGray,
  mainBgColorWhite,
  px2dp, splitLineColorLightGray
} from '@/styles';
import tool from '@/common/getDate';

const ShareCard = (props) => {
  const { disabled, isOneself, name, mobil, carNo, total, useNumber, empowerNum, endTime, startTime, recoveryClick } = props;
  return (
    <View style={styles.recordItemContainer}>
      <View style={styles.recordItemEdge}>
        <Text
          style={{ color: disabled ? '#9D9A95' : fontColorBlack }}
        >
          {`${name} ${mobil}`}
        </Text>
        <Text style={{ color: disabled ? '#9D9A95' : fontColorBlack }}>{`${carNo}`}</Text>
        {
          isOneself && (
            <TouchableOpacity
              disabled={disabled}
              activeOpacity={0.8}
              onPress={() => recoveryClick && recoveryClick()}
              style={disabled ? styles.disabledRecoveryBtn : styles.recoveryBtn}
            >
              <Text
                style={[styles.recoveryBtnText, disabled && { color: '#9D9A95' }]}
              >
                {disabled ? '已回收' : '回收'}
              </Text>
            </TouchableOpacity>
          )
        }
      </View>
      <View style={styles.recordItemDataContainer}>
        <View style={styles.recordItemData}>
          <Text
            style={{ color: disabled ? '#9D9A95' : fontColorCoffee, fontSize: px2dp(54) }}
          >
            {total}
          </Text>
          <Text style={{ color: disabled ? '#9D9A95' : fontColorBlack, fontSize: px2dp(24) }}>累计核销(元)</Text>
        </View>
        <View style={styles.recordItemData}>
          <Text
            style={{ color: disabled ? '#9D9A95' : fontColorCoffee, fontSize: px2dp(54) }}
          >
            {useNumber}
          </Text>
          <Text
            style={{
              color: disabled ? '#9D9A95' : fontColorBlack,
              fontSize: px2dp(24)
            }}
          >
            {empowerNum}
          </Text>
        </View>
      </View>
      <View style={[styles.recordItemEdge]}>
        <View style={[styles.recordItemBottomEdge]}>
          <Text
            style={styles.recordItemBottomEdgeText}
          >
            {`授权：${tool.dateForm(startTime, 'yyyy.MM.dd')}`}
          </Text>
          <Text
            style={styles.recordItemBottomEdgeText}
          >
            {`截止：${tool.dateForm(endTime, 'yyyy.MM.dd')}`}
          </Text>
        </View>
      </View>
    </View>
  );
};

export default ShareCard;

const styles = StyleSheet.create({
  recordItemContainer: {
    height: px2dp(309),
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(10),
    marginBottom: px2dp(20)
  },
  recordItemEdge: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: mainBgColorWhite,
    marginHorizontal: px2dp(20),
    justifyContent: 'space-between',
  },
  disabledRecoveryBtn: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: mainBgColorLightGray,
    borderRadius: px2dp(10),
    width: px2dp(112),
    height: px2dp(45)
  },
  recoveryBtn: {
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: fontColorCoffee,
    borderRadius: px2dp(10),
    borderWidth: px2dp(2),
    width: px2dp(112),
    height: px2dp(45)
  },
  recoveryBtnText: {
    fontSize: px2dp(24),
    color: fontColorCoffee
  },
  recordItemDataContainer: {
    height: px2dp(160),
    flexDirection: 'row',
    backgroundColor: mainBgColorWhite,
    borderTopWidth: px2dp(1),
    borderTopColor: splitLineColorLightGray,
    borderBottomColor: splitLineColorLightGray,
    borderBottomWidth: px2dp(1),
    marginHorizontal: px2dp(20)
  },
  recordItemData: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  recordItemBottomEdge: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 8 / 10,
    justifyContent: 'space-between'
  },
  recordItemBottomEdgeText: {
    color: '#9D9A95',
    fontSize: px2dp(24)
  },
});
